<template>
    <div class="header">
        <div class="head_nav">
            <!-- logo -->
            <div id="myLogo">
                <li class="meLogo"><a href="##"><img src="../assets/images/home_image/logo.png" alt="欧辰logo"></a></li>
            </div>
            <!-- 左侧 路由三大页面 -->
            <div id="myLeftNav">
                <p>
                    <router-link tag="a" :to="{'path':'/myClient'}">我的客户</router-link>
                </p>
                <p>
                    <router-link tag="a" :to="{'path':'/monitoring'}">定位监控</router-link>
                </p>
                <p>
                    <router-link tag="a" :to="{'path':'/caveatRecording'}">统计报表</router-link>
                </p>
            </div>
            <!-- 右侧弹窗 -->

            <div id="myRightNav">
                <p data-toggle="modal" data-target="#update_self">我的资料</p>
                <p data-toggle="modal" data-target="#change_pwd">修改密码</p>
                <p data-toggle="modal" data-target="#exit_box">退出</p>
            </div>
        </div>
        <this-data @refreshMenu="refreshMenu"></this-data>
        <change-password></change-password>
        <exit-login></exit-login>
        <alert></alert>
        <loading></loading>
    </div>
</template>

<script>
    import ThisData from '@/components/userInfo/userInfo'
    import changePassword from '@/components/changePassword/passwordForm'
    import exitLogin from '@/components/exitLogin/exitForm'
    import alert from '@/components/msgModal/msgModal'//引入【提示】
    import loading from '@/base/loading'

    export default {
        components: {
            ThisData,
            changePassword,
            exitLogin,
            alert,
            loading
        },
        methods: {
            refreshMenu () {
                this.$emit('refreshMenu')
            }
        },
        mounted () {
            this.$ajax
                .indexData
                .adminIndexView()
                .then((res) => {
                    let result = res.data
                    if (result.code === 200) {
                        this.$store.commit('setAdmin', result.result.userInfoDTO)
                    } else if (result.code === 408) {
                        this.$store.commit('showAlert', {error: this.$msgDictionary.loginGetaway})
                        let timer = setTimeout(() => {
                            clearTimeout(timer)
                            $('#msgModal').modal('hide')
                            this.$router.push({path: '/login'})
                        }, 2000)
                    } else {
                        this.$store.commit('showAlert', {error: result.msg})
                    }
                }, () => {
                    this.$store.commit('showAlert', {error: this.$msgDictionary.serviceException})
                    let timer = setTimeout(() => {
                        clearTimeout(timer)
                        $('#msgModal').modal('hide')
                        this.$router.push({path: '/login'})
                    }, 2000)
                })
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    a {
        text-decoration: none;
    }

    /* 导航宽度 */
    .head_nav {
        height: 10vh;
        line-height: 10vh;
        position: relative;
    }

    .head_nav li {
        list-style: none;
        display: inline;
    }

    .head_nav div {
        display: inline;
    }

    #myLogo {
        padding-left: 0.88rem;
    }

    #myLeftNav {
        padding-left: 2.25rem;
    }

    #myLeftNav p {
        cursor: pointer;
        text-decoration: none;
        display: inline;
        padding-right: 0.48rem;
    }

    #myLeftNav p a {
        color: rgb(102, 102, 102);
        font-size: 16px;
    }

    #myLeftNav p a:hover, #myLeftNav .router-link-active {
        color: #17D29C;
    }

    #myRightNav {
        position: absolute;
        right: 0.37rem;
    }

    #myRightNav p {
        display: inline;
        padding-right: 0.37rem;
        cursor: pointer;
        font-size: 14px;
        color: rgb(153, 153, 153);
    }

    #myRightNav p:hover {
        color: #17D29C;
    }
</style>
